<template>
  <div id="main"></div>
</template>

<script>
// import echarts from "echarts";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import echarsData from "../../../public/json/echarsData.json";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    let quanshinengyuanjiegou = echarsData.quanshinengyuanjiegou;
   

    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;
    let series = [];
    for (let index = 0; index < quanshinengyuanjiegou.legend.length; index++) {
      series.push({
        name: quanshinengyuanjiegou.legend[index],
        type: "line",
        stack: "total1",
        // label: labelOption,
        label: {
          show: false,
        },

        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: quanshinengyuanjiegou.series[index],
      });
    }

    option = {
      title: {
        text: "全市能源结构",
        // subtext: "深圳节能在线",
        textStyle: {
          //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
          color: "#fff",
          fontSize: 16,
        },
        subtextStyle: {
          color: "#fff",
          fontSize: 14,
        },
        left: "center",
        align: "right",
      },
      // color: ["#0a4591", "#5399df", "#74d3e6", "#8ac48b", "#61a0a8"],
      color: [
        "#5ad8a6",
        "#f6bd16",
        //"#e8684a",
        "#5470c6",
        "#87ba76",
        "#fac858",
        //"#ea7c71",
        "#f1ab60",
        "#1ab8c2",
        "#418dd3",
      ],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "line", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        textStyle: {
          fontSize: 14, //字体大小
          color: "#fff", //字体颜色
        },
        orient: "vertical",
        left: "center",
        bottom: "bottom",

        data: quanshinengyuanjiegou.legend,
      },
      grid: {
        left: "0%",
        right: "2%",
        bottom: "10%",
        containLabel: true,
      },

      xAxis: {
        type: "category",
        axisLabel: {
          textStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: ["#5191b8"],
          },
          show: false,
        },
        axisTick: { show: false },
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "#fff",
            width: 1, //这里是为了突出显示加上的
          },
        },
        // axisLabel: {
        //   show: false,
        //   textStyle: { color: "none" }
        // },
        data: quanshinengyuanjiegou.xAxis,
      },
      // yAxis: {
      //   type: "category",
      //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      // },
      yAxis: [
        {
          type: "value",
          boundaryGap: true,
          axisTick: { show: false },
          splitLine: {
            show: false, //去掉网格线
          },
          axisLabel: {
            show: false,
            textStyle: { color: "none" },
          },

          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
      ],
      series: series,
    };

    option && myChart.setOption(option);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {

  },
};
</script>
<style >

</style>
